<template>
    <div class='photoinfo-container'>
        <h3>{{ photoinfo.title }}</h3>
        <p class="subtitile">
            <span>发表时间: {{ photoinfo.add_time }}</span>
            <span>点击:{{ photoinfo.click }}次</span>
        </p>

        <hr>

        <div class="img-box">
            <img  v-for="item in list" :key='item.src' :src="item.src"  preview="1" preview-text="描述文字">
        </div>

        <div class="content" v-html="photoinfo.content"></div>
        
        <br> 
        
        <cmt-box :id = "id"></cmt-box>
    </div>

</template>


<script>
import comment from '../subcomponents/comment.vue'


export default {
    data(){
        return {
            id: this.$route.params.id,
            photoinfo:{
                add_time: "2019-1-03 12:11:00",
                click: 0,
                content: "这里是存放图片详情内容的区域,这里是存放图片详情内容的区域,这里是存放图片详情内容的区域,这里是存放图片详情内容的区域",
                title: "这是离线数据的标题"
            },
            list: [
                {
                    src: require('../../images/cbd.jpg')
                },
                {
                    src: require('../../images/newsinfo.jpg')
                },
                {
                    src: require('../../images/shuijiao.jpg')
                },
                {
                    src: require('../../images/yuantiao.jpg')
                }
            ]
        };
    },
    created(){
        this.getPhotoInfo();
    },
    methods: {
        getPhotoInfo(){
            // this.$http.get('' + this.id).then(result => {
            //     if(result.body.status === 0){
            //         this.photoinfo = result.body.message;
            //     }
            // })
        },
        show (index) {
            this.$preview.open(index, this. previewlist);
        }
    },
    components:{
        'cmt-box' : comment
    }
}
</script>

<style lang="scss" scoped>
    .photoinfo-container{
        padding : 3px;

        h3{
            font-size: 20px;
            text-align: center;
            margin:15px;
        }

        .subtitile{
            display: flex;
            justify-content: space-between;
        }

        .content{
            font-size: 14px;
            line-height: 30px;
        }

        .img-box{
            margin: 15px 0px;
            img{
                    width:100px;
                    margin: 7px 11px;
                    height:70px;
                    box-shadow: 0 0 8px #999;
                } 
        }
                
    }
</style>
